import { Card, Input, Select, Button } from 'antd'
import MarkdownIt from 'markdown-it'; // 解析器
import MdEditor from 'react-markdown-editor-lite'; // 编辑器
import { apigetExamType, apiClassType,apiAddExamList } from '../api'
import React, {useEffect, useState} from 'react'

// 导入编辑器的样式
import 'react-markdown-editor-lite/lib/index.css';

const mdParser = new MarkdownIt();

const {Option} = Select

const Add = () => {

    // 保存考试类型
    const [examTypeList, setExamTypeList] = useState([]);

    // 保存课程类型
    const [classType, setClassType] = useState([]);

    // 保存参数  搜集添加试题的参数
    const [formContent, setFormContent] = useState({})

    const getMdContent = (data) => {
        // 获取到编辑器中的内容
        setFormContent({
            ...formContent,
            content: data.text,
            contentHtml: data.html
        })
    }

    useEffect(() => {
        // 获取考试类型
        apigetExamType().then(res => {
            setExamTypeList(res.data)
        })

        // 获取课程类型
        apiClassType().then(res => {
            setClassType(res.data)
        })
    }, [])

    // 添加试题
    const onOk = () => {
        apiAddExamList(formContent).then(res => {
            console.log(res)
        })
    } 

    return <Card title="题目信息">
        <div>
            <h3>题目信息</h3>
            <h3>题干</h3>
            <Input value={formContent.title} onChange={e => setFormContent({...formContent, title: e.target.value})} />
        </div>

        <div>
            <h3>题目主题</h3>
            <MdEditor
                style={{height:"500px"}}
                renderHTML={text => mdParser.render(text)} // 解析之后的内容
                onChange={getMdContent}
            ></MdEditor>
        </div>

        <div>
            <h3>请选择考试类型</h3>
            <Select style={{width: "100%"}} value={formContent.examType} onChange={e => setFormContent({...formContent, examType: e})}>
                {
                    examTypeList.length && examTypeList.map((item, idx) => {
                        return <Option key={idx} value={item.type}>{item.name}</Option>
                    })
                }
            </Select>
        </div>
        <div>
            <h3>请选择课程类型</h3>
            <Select style={{width: "100%"}} value={formContent.classType} onChange={e => setFormContent({...formContent, classType: e})}>
                {
                    classType.length && classType.map((item, idx) => {
                        return <Option key={idx} value={item.type}>{item.name}</Option>
                    })
                }
            </Select>
        </div>

        <Button style={{marginTop: "20px"}} type="primary" onClick={onOk}>确认</Button>
    </Card>
}

export default Add